<!DOCTYPE html>
<html>
<head>
    <title>中通钢管数据可视化</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../../static/down_and_fault/css/contrast.css">
    <!--引入echarts和jquery-->
    <script src="../../../static/common/jquery-3.6.0.min.js"></script>
    <script src="../../../static/common/echarts.min.js"></script>
    <!--引入图标和导航栏script-->
    <link rel="shortcut icon " type="images/x-icon" href="../../../static/common/logo.png">
    <script src="../../../static/down_and_fault/js/script.js"></script>
    <!--保证时间选择框运行所必要的组件-->
    <script src="../../../static/common/datepick/bootstrap-datepicker.min.js"></script>
    <script src="../../../static/common/datepick/bootstrap-datepicker.zh-CN.js"></script>
    <script src="../../../static/common/datepick/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../../static/common/datepick/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="../../../static/common/datepick/bootstrap.min.css">
    <script>
        console.log({{ cmy3|tojson }})
    </script>
    <style>
        /*导航栏的样式*/
        ul {
            padding-left: 0;
        }

        ul li {
            list-style-type: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .page-header {
            background-color: rgb(255, 255, 255);
            position: absolute;
            width: 100%;
            min-width: 960px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
            z-index: 1;
        }

        .page-header.sticky {
            position: fixed;
            top: 0;
        }

        .page-header > .inner {
            margin: auto;
            width: 960px;
        }

        .no-boxshadow .page-header {
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .primary-nav {
            float: right;
            line-height: 80px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .primary-nav li {
            float: left;
        }

        .primary-nav a {
            display: block;
            padding: 0 1.36em;
        }

        .primary-nav a:hover {
            background-color: rgb(240, 240, 240);
        }
    </style>
    <script>
        console.log({{ cmy4|tojson }})
        $(document).ready(function () {
            //储存之前的合格日期，以便改为非法日期后再将合格日期填写回去
            var month_start1 = {{ preset[0]|tojson }}
            var month_stop1 = {{ preset[1]|tojson }}
            var week_start1 = {{ preset[2]|tojson }}
            var week_stop1 = {{ preset[3]|tojson }}
            var date_type1 = '星期'

            // 时间提交按钮
            $("#btn1").click(function () {
                // 获取日期还是星期
                var select = $('input[name="cmy"]:checked').val();
                // 获取起始日期并判断日期是否合法
                if (select === '星期') {
                    var start_date = $('#week_start').val()
                    var stop_date = $('#week_stop').val()
                    if (start_date > stop_date) {
                        alert('警告：起始日期大于小于结束日期')
                        console.log(week_start1, week_stop1)
                        $('#week_start').val(week_start1)
                        $('#week_stop').val(week_stop1)
                        return
                    }
                    if (start_date === '' || stop_date === '') {
                        alert('警告：起始日期或结束日期未选择')
                        $('#week_start').val(week_start1)
                        $('#week_stop').val(week_stop1)
                        return
                    }
                    if (start_date === week_start1 && stop_date === week_stop1 && date_type1 === select) {
                        alert('警告：本次选择的星期范围和上次一样')
                        return
                    }
                } else {
                    start_date = $('#month_start').val()
                    stop_date = $('#month_stop').val()
                    if (start_date > stop_date) {
                        alert('警告：起始日期大于小于结束日期')
                        $('#month_start').val(month_start1)
                        $('#month_stop').val(month_stop1)
                        return
                    }
                    if (start_date === '' || stop_date === '') {
                        alert('警告：起始日期或结束日期未选择')
                        $('#month_start').val(month_start1)
                        $('#month_stop').val(month_stop1)
                        return
                    }
                    if (start_date === month_start1 && stop_date === month_stop1 && date_type1 === select) {
                        alert('警告：本次选择的月份范围和上次一样')
                        return
                    }
                }
                    // 如果确实为有效提交
                    // 将输入框中的内容换为有效输入内容
                $.ajax({
                    url: '{{ url_for('contrast.contrast2') }}',
                    type: 'post',
                    data: {
                        'date_type': select,
                        'start': start_date,
                        'stop': stop_date
                    },
                    success: function (data) {
                        $("#cmy").html(data);
                        if (select === '星期') {
                            week_start1 = start_date
                            week_stop1 = stop_date
                            date_type1 = '星期'
                        }else{
                            month_start1 = start_date
                            month_stop1 = stop_date
                            date_type1 = '月份'
                        }
                    },
                    error: function (data) {
                        alert('出现问题')
                    }
                })
            })
            //机组提交按钮
            $('#btn2').click(function (){
                let crew = $('#crew').val()
                let select = $('input[name="cmy"]:checked').val();
                if (select === '星期') {
                    var start_date = week_start1
                    var stop_date = week_stop1
                }else{
                    var start_date = month_start1
                    var stop_date = month_stop1
                }
                $.ajax({
                    url: '{{ url_for('contrast.contrast3') }}',
                    type: 'post',
                    data: {
                        'date_type': select,
                        'start': start_date,
                        'stop': stop_date,
                        'crew': crew
                    },
                    success: function (data) {
                        $("#zfh").html(data);
                    },
                    error: function (data) {
                        alert('出现问题')
                    }
                })
            })
            // 时间提交选择器
            // 月选择器
            $('#month_start').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
                startView: 1,
                minViewMode: 1,
                maxViewMode: 2,
                format: 'yyyy-mm'
            })
            $('#month_stop').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
                startView: 1,
                minViewMode: 1,
                maxViewMode: 2,
                format: 'yyyy-mm'
            })
            // 周选择器
            $('#week_start').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
                daysOfWeekDisabled: '0,2,3,4,5,6',
                daysOfWeekHighlighted: '1',
            })
            $('#week_stop').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
                daysOfWeekDisabled: '1,2,3,4,5,6',
                daysOfWeekHighlighted: '0',
            })

            //120分钟提交按钮
            $(document).on('click', '.h120', function () {
                console.log('已经选中')
                let start_date
                let stop_date
                let crew = $(this).text()
                let select = $('input[name="cmy"]:checked').val();
                // 获取要查询的日期和类别
                if (select === '星期') {
                    start_date = $('#week_start').val()
                    stop_date = $('#week_stop').val()
                } else {
                    start_date = $('#month_start').val()
                    stop_date = $('#month_stop').val()
                }
                console.log(select,start_date,stop_date,crew)
                window.open('{{ url_for('contrast.contrast4') }}?' + 'a=' + start_date + '&b=' + stop_date + '&c=' + select + '&d=' + crew);

            })
        })
    </script>
</head>

<body>
<!-- 大标题 -->
<div class="title">
    <img src="../../../static/common/logo.png" style="width: 100px;height: 100px" alt="公司logo">
    <h1>中通钢管数据可视化平台</h1>
</div>
<!-- 页面导航栏 -->
<header class="page-header">
    <div class="inner">
        <nav class="primary-nav">
            <ul>
                <li><a href="down" target="_blank">停机分析</a></li>
                <li><a href="stoppage" target="_blank">故障分析</a></li>
                <li><a href="parse" target="_blank">生产分析</a></li>
                <li><a href="contrast" target="_blank">信息对比</a></li>
            </ul>
        </nav>
    </div>
</header>
<!-- b1 最外层的不透明框 -->
<!-- 1200 -->
<!-- 300 100 300 100 200 -->
<div class="b1">
    <div class="b0" style="margin: 70px 50px 70px 50px">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="month_start">开始月份：</label><input type="text" id="month_start" value="{{ preset[0]}}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="month_stop">结束月份：</label><input type="text" id="month_stop" value="{{ preset[1] }}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger">
        <label>星期</label><input type="radio" checked="checked" name="cmy" value="星期" />
        <label>月份</label><input type="radio" name="cmy" value="月份" />

    </div>
    <div class="b0" style="margin: 70px 50px 70px 50px">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="week_start">开始星期：</label><input type="text" id="week_start" value="{{ preset[2] }}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="week_stop">结束星期：</label><input type="text" id="week_stop" value="{{ preset[3] }}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger"><button id="btn1" style="width: 200px;height: 50px;display: inline-block">提交</button>
    </div>

    <div id='cmy' style='margin: 0 50px'>
        {% include 'down_and_fault/contrast/contrast-table.html' %}
    </div>

    <!--机电自对比和选择区域-->
    <div class="btn2">
        <label for="crew">机组编号:</label><input id="crew" value="{{ preset[4] }}"><button id="btn2">提交</button>
    </div>
    <div id="zfh">
        {% include 'down_and_fault/contrast/contrast-picture.html' %}
    </div>

</div>
<footer>
    <div class="text">数据来源：精益项目组收集整理</div>
</footer>
</body>
</html>